<route lang="json5">
  {
    style: {
      navigationBarTitleText: '示例',
    },
  }
</route>

<template>
  <view class="page">
    <gi-sticky>
      <sar-search shape="round" placeholder="请输入关键词" search="搜索" @search="search"></sar-search>
    </gi-sticky>

    <gi-gap></gi-gap>

    <sar-pull-down-refresh
      ref="pullDownRefreshRef"
      :loading="loading"
      @refresh="onRefresh"
    >
      <gi-page-list :loading="loading" :list-length="list.length">
        <gi-list-item v-for="item in list" :key="item.id" :title="item.workTicketTypeName" :description="item.description">
          <template #extra>
            <gi-tag status="warning">{{ item.statusName }}</gi-tag>
          </template>
          <gi-descriptions>
            <gi-descriptions-item label="工作票编号">{{ item.wtCode }}</gi-descriptions-item>
            <gi-descriptions-item label="主要设备名称">{{ item.assetName }}</gi-descriptions-item>
            <gi-descriptions-item label="工作负责人">{{ item.workPersonName }}</gi-descriptions-item>
            <gi-descriptions-item label="责任班组">{{ item.workTeamName }}</gi-descriptions-item>
            <gi-descriptions-item label="工作票签发人">{{ item.signPersonName }}</gi-descriptions-item>
            <gi-descriptions-item label="计划开始时间">{{ item.planStartTime }}</gi-descriptions-item>
            <gi-descriptions-item label="计划结束时间">{{ item.planEndTime }}</gi-descriptions-item>
          </gi-descriptions>
          <template #footer>
            <gi-space justify="end">
              <sar-button type="mild" size="mini" :root-style="{ width: '80px', flexGrow: 0 }">审批</sar-button>
              <sar-button size="mini" :root-style="{ width: '80px', flexGrow: 0 }">编辑</sar-button>
            </gi-space>
          </template>
        </gi-list-item>

        <sar-load-more v-if="list.length" status="loading"></sar-load-more>
      </gi-page-list>
    </sar-pull-down-refresh>
  </view>
</template>

<script lang='ts' setup>
import { pageQueryList, type PageQueryListItem } from '@/apis/test'

const pullDownRefreshRef = ref()

onPageScroll(({ scrollTop }) => {
  pullDownRefreshRef.value?.enableToRefresh(scrollTop === 0)
})

const loading = ref(false)
const list = ref<PageQueryListItem[]>([])
async function getPageList() {
  try {
    loading.value = true
    const res = await pageQueryList()
    list.value = res
  }
  finally {
    loading.value = false
  }
}

getPageList()

function search() {
  if (list.value.length) {
    loading.value = true
    setTimeout(() => {
      list.value = []
      loading.value = false
    }, 1000)
  }
  else {
    getPageList()
  }
}

function onRefresh() {
  getPageList()
}
</script>

<style lang='scss' scoped>

</style>
